/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/

// 1.默认加载学员信息列表
const initData = () => {
    axios({
        url: '/student/list',
        method: 'get',
    }).then(res => {
        //成功回调
        console.log(res)
        let arr = res.data.data
        document.querySelector('tbody').innerHTML = arr.map(item => `
        <tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm btn-edit" data-id = "${item.id}">修改</button>
              <button type="button" class="btn btn-danger btn-sm btn-delete" data-id = "${item.id}">删除</button>
            </td>
        </tr>
        `).join('')
    })
}
initData()

// 2.添加学员 ：bootstrap模态框
document.querySelector('.btnAddStu ').addEventListener('click', function () {
    document.querySelector('[type="reset"]').click()
    document.querySelector('.addModalLabel').innerHTML = '添加学员'
    document.querySelector('.btnAddStudent').innerHTML = '确认添加'
    //弹出模态框
    $('#addModal').modal('show')

    //加载省的数据 省联动
    getProvince()
})

const getProvince = () => {
    axios({
        url: '/geo/province',
        method: 'get',
    }).then(res => {
        //成功回调
        console.log(res)
        //渲染省数据
        //1.先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        arr.unshift(`<option value="">--省--</option>`)
        document.querySelector('[name="province"]').innerHTML = arr.join('')
    })
}


//市联动 监听省变化 以下顺序不可更改
document.querySelector('[name="province"]').addEventListener('change', function () {
    //1.获取当前选择的省
    const pname = this.value
    //2.只要用户修改了省,之前选择的市和县都要恢复默认值
    document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>`

    document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
    //3.如果用户没有选择省,不需要加载市的数据
    if (pname == '') {
        return
    }
    //4.加载市的数据
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname }
    }).then(res => {
        //成功回调
        console.log(res)
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        arr.unshift(`<option value="">--市--</option>`)
        document.querySelector('[name="city"]').innerHTML = arr.join('')
    })

})

//县联动 监听市变化
document.querySelector('[name="city"]').addEventListener('change', function () {
    //获取当前选择的省
    const pname = document.querySelector('[name="province"]').value
    const cname = this.value
    //只要用户修改了市,之前选择的县都要恢复默认值
    // document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
    //如果用户没有选择省,不需要加载市的数据
    if (cname == '') {
        return
    }
    //加载市的数据
    axios({
        url: '/geo/county',
        method: 'get',
        params: { pname, cname }
    }).then(res => {
        //成功回调
        console.log(res)
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        arr.unshift(`<option value="">--区/县--</option>`)
        document.querySelector('[name="county"]').innerHTML = arr.join('')
    })

})

//4.点击重置按钮: 重置表单
//不需要写任何js: form表单中的按钮如果type为reset,这点击按钮会自动重置表单


//5.点击确认添加: 添加学员
// 非空+正则: 交给服务器处理
//form表单按钮,需要阻止默认跳转
document.querySelector('.btnAddStudent').addEventListener('click', function (e) {
    //阻止默认跳转
    e.preventDefault()
    //1.获取表单所有的参数
    /* FormData()对象有两种工作模式
    第一种(手动挡): 创建空的formdata对象,使用append()方法手动追加参数
        (1)let fd = new FormData()
        (2)fd.append('参数名',参数值)
    第二种(自动挡): 使用form表单来创建FormData,会自动遍历form中的每一个表单元素.将name属性作为参数名
        let fd = new FormData(form表单) 
    */
    let fd = new FormData(document.querySelector('.add-form'))
    // console.log(fd);
    /* 注意点: 虽然可以用FormData一键获取表单所有参数,但是这个接口不能直接发FormData
        原因:formdata会自动修改请求头为文件格式请求头: multipart/form-data
        而我们这个接口是不需要修改请求头的
        总结:
            (1)如果这个表单里面有文件数据,则可以直接使用formdata
            (2)如果这个表单里面没有文件,需要自己把formdata里面的数据取出来放到对象中
    */
    let obj = {}
    //formdata对象不能直接打印,需要用到forEach才可以看到里面的数据
    fd.forEach((item, index) => {
        console.log(`${index}:${item}`);
        obj[index] = item
    })
    console.log(obj);

    let url = '/student/add'
    let method = 'post'
    if (this.innerHTML == '确认编辑') {
        url = '/student/update'
        method = 'put'
        obj.id = this.dataset.id
    }

    axios({
        url,
        method,
        data: obj,
    }).then(res => {
        //成功回调
        console.log(res)
        //弹窗提示
        Toast.success('添加成功')
        //清空表单
        document.querySelector('[type="reset"]').click()
        //关闭模态框
        document.querySelector('.btn-close').click()
        //重新加载列表
        initData()
    }).catch(err => {
        Toast.fail(err.response.data.message)
    })
})


/* 删除学员:删除和编辑都是动态新增按钮,都需要注册委托事件 */
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-delete')) {
        axios({
            url: '/student/delete',
            method: 'delete',
            params: { id: e.target.dataset.id }
        }).then(res => {
            //成功回调
            console.log(res)
            if (res.data.code == 0) {
                Toast.success('删除成功')
                initData()
            } else {
                Toast.info(res.data.message)
            }
        })
    }



})


//复用
document.querySelector('tbody').addEventListener('click', function (e) {
    //判断是不是编辑按钮
    if (e.target.classList.contains('btn-edit')) {
        //(1)弹出模态框 : 标题和确认按钮文本不同
        $('#addModal').modal('show')
        //修改不同的文本
        document.querySelector('.addModalLabel').innerHTML = '修改学员'
        document.querySelector('.btnAddStudent').innerHTML = '确认编辑'
        //默认加载省数据
        getProvince()
        //(2)编辑模态框,需要加载当前学员数据
        const id = e.target.dataset.id
        axios({
            url: '/student/one',
            method: 'get',
            params: { id }
        }).then(res => {
            //成功回调
            console.log(res)
            //服务器响应的数据渲染到表单
            const data = res.data.data
            document.querySelector('[name="name"]').value = data.name
            document.querySelector('[name="age"]').value = data.age
            document.querySelector('[name="group"]').value = data.group
            if (data.sex == '男') {
                document.querySelectorAll('[name="sex"]')[0].checked = true
            } else {
                document.querySelectorAll('[name="sex"]')[1].checked = true
            }
            document.querySelector('[name="phone"]').value = data.phone
            document.querySelector('[name="salary"]').value = data.salary
            document.querySelector('[name="truesalary"]').value = data.truesalary
            //省市县
            //省:下拉菜单已经加载好了,可以直接设置value来选中对应的option
            document.querySelector('[name="province"]').value = data.province
            //市、县没有数据的，需要连html一起渲染
            document.querySelector('[name="city"]').innerHTML = `<option>${data.city}</option>`
            document.querySelector('[name="county"]').innerHTML = `<option>${data.county}</option>`
        })

        //(3).编辑按钮ajax多一个参数id, 就可以把'修改按钮id' 传递给  '模态框确认按钮'
        document.querySelector('.btnAddStudent').dataset.id = id
    }
})
